<template>
  <div id="app">
    <div class="left">
      <div class="section">
        <div class="section-title">
          <span class="title">周转箱分布情况</span>
        </div>
        <hzwq-charts :options="fenbuOption"
                     :config="{id:'fenbuCharts',width:'100%',height:'400px'}"></hzwq-charts>
      </div>
    </div>
    <div class="right">
      <div class="section">
        <div class="section-title">
          <span class="title">储位利用情况</span>
        </div>
        <hzwq-charts :options="liyongOption"
                     :config="{id:'liyongCharts',width:'100%',height:'400px'}"></hzwq-charts>
      </div>
    </div>

    <div class="left">
      <div class="section">
        <div class="section-title">
          <span class="title">周转箱回收情况</span>
          <div class="btn-box">
            <div @click="getHuishou(0)"
                 class="btn"
                 :class="{select:huishouType==0}">最近7天</div>
            <div @click="getHuishou(1)"
                 class="btn"
                 :class="{select:huishouType==1}">最近30天</div>
          </div>
        </div>
        <hzwq-charts :options="huishouOption"
                     :config="{id:'huishouCharts',width:'100%',height:'400px'}"></hzwq-charts>
      </div>
    </div>
    <div class="right">
      <div class="section">
        <div class="section-title">
          <span class="title">中心周转箱状态占比</span>
        </div>
        <hzwq-charts :options="zhuangtaiOption"
                     :config="{id:'zhuangtaiCharts',width:'100%',height:'400px'}"></hzwq-charts>
      </div>
    </div>
  </div>
</template>

<script>
import HzwqCharts from "@/components/hzwq-charts/hzwq-charts"
export default {
  components: {
    HzwqCharts
  },
  data() {
    return {
      fenbuOption: {
        tooltip: {
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            align: "center",
            margin: 25,
            rotate: 35
          },
          axisTick: {
            alignWithLabel: true
          },
          data: [],
        },
        yAxis: {
          name: '单位:个',
          nameTextStyle: {
            fontSize: 14,
            padding: [0, 0, 12, 10]
          },
          type: 'value',
          max: 5,
          axisLine: {
            lineStyle: {
              type: "dashed",
            }
          }
        },
        series: [{
          type: 'bar',
          barWidth: '20',
          itemStyle: {
            barBorderRadius: [3, 3, 0, 0]
          },
          data: [],
        }]
      },
      liyongOption: {
        tooltip: {
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [{
          name: '利用情况',
          type: 'pie',
          radius: [85, 110],
          avoidLabelOverlap: false, // 否启用防止标签重叠策略
          hoverAnimation: false,
          silent: false, // 是否“不”响应和触发鼠标事件
          label: {
            normal: {
              show: true,
              formatter: "{d}% ",
              textStyle: {
                color: "#666666",
                fontSize: 14
              },
            },
          },
          labelLine: {
            normal: {
              smooth: 0.1,
              length: 20,
              length2: 20
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '22',
              fontWeight: "800"
            }
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: "#ffffff"
          },
          data: [
            { value: 30, name: '电能表', itemStyle: { color: "#1890ff" } },
            { value: 30, name: '互感器', itemStyle: { color: "#1fc6ac" } },
            { value: 10, name: '采集终端', itemStyle: { color: "#ffa10b" } },
            { value: 15, name: '空箱占用', itemStyle: { color: "#ff7777" } },
            { value: 15, name: '空闲', itemStyle: { color: "#3f68df" } }
          ]
        }]
      },
      huishouOption: {
        grid: {
          bottom: 20,
        },
        tooltip: {
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            align: "center",
            margin: 25,
            rotate: 0
          },
          axisTick: {
            alignWithLabel: true
          },
          data: [],
        },
        yAxis: {
          name: '单位:个',
          nameTextStyle: {
            fontSize: 14,
            padding: [0, 0, 12, -30]
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              type: "dashed",
            }
          },
        },
        series: [{
          type: 'line',
          symbol: "circle",
          symbolSize: 12,
          itemStyle: {
            normal: {
              lineStyle: {
                width: 4,
                shadowColor: 'rgba(34, 217, 189,0.5)',
                shadowBlur: 5,
                shadowOffsetY: 5
              }
            }
          },
          data: [],
        }]
      },
      huishouType: 0,
      zhuangtaiOption: {
        tooltip: {
        },
        legend: {
          top: '3%',
          left: 'center',
          itemGap: 30,
          textStyle: {
            padding: [2, 0, 0, 2]
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            align: "center",
            margin: 25,
            rotate: 35
          },
          axisTick: {
            alignWithLabel: true
          },
          data: [],
        },
        yAxis: {
          name: '单位:个',
          nameTextStyle: {
            fontSize: 14,
            padding: [0, 0, 12, -20]
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              type: "dashed",
            }
          }
        },
        series: [{
          name: "在用",
          type: 'bar',
          barWidth: '20',
          itemStyle: {
            barBorderRadius: [3, 3, 0, 0]
          },
          data: [],
        }, {
          name: "空闲",
          type: 'bar',
          barWidth: '20',
          itemStyle: {
            barBorderRadius: [3, 3, 0, 0]
          },
          data: [],
        }]
      },
    }
  },
  created() {
    this.getFenbu()
    this.getHuishou()
    this.getZhuangTai()
  },
  methods: {
    getFenbu() {
      let city = ["计量中心", "郑州", "开封", "濮阳", "洛阳", "三门峡", "许昌", "信阳"
        , "南阳", "漯河", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "商丘", "周口", "驻马店", "济源"
      ]
      let series = city.map(() => this.getRandomInt(1, 4))
      this.fenbuOption.xAxis.data = city
      this.fenbuOption.series[0].data = series
    },
    getHuishou(type = 0) {
      let time = [
        '10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10',
        '10-11', '10-12', '10-13', '10-14', '10-15', '10-16', '10-17', '10-18', '10-19', '10-20',
        '10-21', '10-22', '10-23', '10-24', '10-25', '10-26', '10-27', '10-28', '10-29', '10-30',
      ]
      let copyTime = []
      let series = []
      if (type === 0) {
        copyTime = time.slice(time.length - 7)
        series = copyTime.map(() => this.getRandomInt(600, 900))

      } else {
        copyTime = time.slice(0)
        series = copyTime.map(() => this.getRandomInt(300, 900))
      }
      this.huishouType = type
      this.huishouOption.xAxis.data = copyTime
      this.huishouOption.series[0].data = series
    },
    getZhuangTai() {
      let name = ['单相表', '三相表', '互感器', '采集终端']
      let data1 = name.map(() => this.getRandomInt(150, 499))
      let data2 = name.map(() => this.getRandomInt(90, 280))
      this.zhuangtaiOption.xAxis.data = name
      this.zhuangtaiOption.series[0].data = data1
      this.zhuangtaiOption.series[1].data = data2
    },
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #f5f7f7;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.left {
  width: 70%;
  margin-right: 20px;
}
.right {
  width: calc(30% - 20px);
}
@media screen and (max-width: 1300px) {
  #app {
    display: block;
  }
  .left {
    width: 100%;
    margin-right: 0;
  }
  .right {
    width: 100%;
  }
}
.section {
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 20px;
}
.section-title {
  line-height: 50px;
  border-bottom: 1px solid #ededed;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-title .title {
  position: relative;
  padding-left: 10px;
  font-weight: 800;
  color: #000;
}
.section-title .title::after {
  width: 4px;
  height: 1em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background-color: #1fc6ac;
  border-radius: 2px;
}
.btn-box {
  display: flex;
}
.btn {
  color: #999999;
  margin-left: 50px;
  user-select: none;
  cursor: pointer;
}
.btn.select {
  color: #1fc6ac;
}
</style>
